<template>
    <div class="atriclae-list">
        <van-pull-refresh v-model="isreFreshloading" @refresh="onRefresh" success-text="刷新成功" success-duration="1500">
        <van-list
  v-model:loading="loading"
  :finished="finished"
  finished-text="没有更多了"
  v-model:error="error"
  error-text="请求失败，点击重新加载"
  @load="onLoad"
>
<ArticleItem v-for="article in list" :article="article" :key="article.name"></ArticleItem>
</van-list>
</van-pull-refresh>
</div>
</template>
<script>
import {ref} from "vue"
import {getArticles}  from "../api/article"
import ArticleItem from "./article-item.vue"


export default{
    props:{
        channel:{
            type:Object,
            required:true
        }
    },  
      components:{
            ArticleItem
        },
    setup(props){
    
        let list = ref([]);
    let loading = ref(false);
    let finished = ref(false);
    const error = ref(false);
    let isreFreshloading=ref(false) //控制下拉刷新laoding状态
let pageNumber=ref(null)
    const onLoad =async () => {
      // 异步更新数据
      const params={
        channel_id:props.channel.id,
        pageNumber:pageNumber.value ||1
      }
      try {
         let {data}=  await  getArticles(params)

    list.value.push(...(data.list)) 
        // 加载状态结束
        loading.value = false;

        // 数据全部加载完成
        if (data.list.length>0) {
            pageNumber.value=data.p_num
        
        }else{
            finished.value = true;
        }

      } catch(err){
        error.value=true
        loading.value=false
      }
   
    };

    //下拉刷新
 async function   onRefresh (){
      try {
            const params={
                channel_id:props.channel.id,
                pageNumber:1,
                referrer:"load"
            }
       let {data}=   await getArticles(params)
       console.log(data);
        list.value.unshift(...(data.list))   
        //关闭下拉刷新laoding状态
        isreFreshloading.value=false
        console.log( isreFreshloading.value);
        } catch (error) {
            console.log(error);
        }
 }
      
       

    return {
        list,
      onLoad,
      loading,
      finished,
      onRefresh,
      isreFreshloading
   
    };
    }
}

</script>


<style>
.atriclae-list{
    margin-top: 80px;
    height: 530px;
    overflow-y: auto;
}
</style>